<template>
  <div>
    <div class="el-carousel_snail">
      <el-carousel :interval="4000" type="card" height="300px">
        <el-carousel-item v-for="item in pictures" :key="item.id">
          <button @click="mainBodyImg(item.id)">
            <img :src="item.viewAddress" style="width: 100%;height: 100%">
          </button>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div>
      <span style="font-family: 'PingFang SC';font-size:20px; margin-left: 120px; color: #409EFF">靶场推荐</span>
      <div class="line"></div>
      <br>
      <keep-alive>

        <show-test-list-plus :getKeyword="inputKeyword" style="margin-left: 65px"></show-test-list-plus>

      </keep-alive>
    </div>

  </div>
</template>

<script>
import ScoreLeaderBoard from "@/components/scoreLeaderBoard.vue";
import ShowTestList from "@/components/ShowTestList.vue";
import ShowTestListPlus from "@/components/ShowTestListPlus.vue";

export default {
  props: {
    inputKeyword: String,
    required: true,
  },
  name: "mainBody",
  components: {ShowTestListPlus, ShowTestList, ScoreLeaderBoard},
  data() {
    return {

      pictures: [{id: 1234567891043, viewAddress: "http://192.168.201.41:8004/imgs/top_001.png"},
        {id: 1234567891048, viewAddress: "http://192.168.201.41:8004/imgs/top_002.png"},
        {id: 1234567891044, viewAddress: "http://192.168.201.41:8004/imgs/top_003.png"},
        {id: 1234567891045, viewAddress: "http://192.168.201.41:8004/imgs/top_004.png"},
        {id: 1234567891050, viewAddress: "http://192.168.201.41:8004/imgs/top_005.png"},
        {id: 1234567891042, viewAddress: "http://192.168.201.41:8004/imgs/top_006.png"},
      ],
    }
  },
  methods: {
    mainBodyImg(id) {
      sessionStorage.setItem("testId", id);
        setTimeout(() => {
            this.$router.push("/testDetail")
        }, 1000 * 0.5)

    }
  }
}
</script>

<style scoped>
.el-carousel_snail {
  margin-right: 20px;
  margin-left: 20px;
}

</style>